<template>
  <div class='footer'>
    <div class="footer-row">
      <el-row :gutter="30">
        <el-col :md="8" :sm="16" :xs="24">
          <!--suppress HtmlUnknownTarget -->
          <img :src='headImage' draggable="false" alt=""/>
          <p>{{text}}</p>
          <el-form :rules="rules" :model="ruleForm" ref="form" prop="email">
            <el-form-item prop="email">
              <el-input class="myInput" v-model="ruleForm.email" placeholder="订阅邮箱" size="small">
                <template slot="suffix">
                  <el-button :disabled="loading" type="text" @click="send" role="button">
                    <i class="el-icon-s-promotion" />
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :md="4" :sm="8" :xs="24">
          <span class='title'>About Kinen</span>
          <ul class="ul">
            <li>About Our Company</li>
            <li>License</li>
            <li>Policy Privacy</li>
            <li>Terms of use</li>
          </ul>
        </el-col>
        <el-col :md="4" :sm="8" :xs="24">
          <span class='title'>About Kinen</span>
          <ul class="ul">
            <li>Top Sellers</li>
            <li>Featured Items</li>
            <li>Discount Shop</li>
            <li>New Arrivals</li>
          </ul>
        </el-col>
        <el-col :md="8" :sm="16" :xs="24">
          <span class='title'>About Kinen</span>
          <ul class="ul">
            <li><i class="el-icon-map-location"/>1622 Colins Street West, Strawberry (Le), ITALY</li>
            <li><i class="el-icon-message"/>Email: 1393886097@qq.com</li>
            <li><i class="el-icon-phone"/>Phone: +00 654 321 9874</li>
            <li><i class="el-icon-timer"/>Monday - Saturday:9:00 - 18:00 pm</li>
          </ul>
          <ul class="icon-ul">
            <li><i class="fa fa-facebook"/></li>
            <li><i class="fa fa-twitter"/></li>
            <li><i class="fa fa-pinterest"/></li>
            <li><i class="fa fa-linkedin"/></li>
            <li><i class="fa fa-google-plus"/></li>
          </ul>
        </el-col>
    </el-row>
    </div>
  </div>
</template>

<script>
import headImage from '@img/logo2-l.png'

export default {
  name: 'PageFooter',
  data: () => {
    return {
      loading: false,
      headImage: headImage,
      text: 'These cases are perfectly simple and easy to distin guish. In a free ' +
            'hour, when our power of choice is untram melled and when nothing ' +
            'prevents our being able to be circumstances and owing claim.',
      ruleForm: {
        email: ''
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    send () {
      const vm = this
      this.$refs.form.validate(_ => {
        if (_) {
          vm.loading = true
          setTimeout(_ => {
            vm.$message.success('邮箱：' + vm.ruleForm.email)
            vm.loading = false
          }, 500)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .footer{
    width: 100%;
    padding: 50px 0;
    background-color: #333333;

    .footer-row{
      max-width: 1110px;
      width: 100%;
      display: block;
      margin: 0 auto;
      text-align: left;
      color: white;

      img{
        margin-bottom: 20px;
      }

      p{
        line-height: 26px;
        margin-bottom: 25px;
        font-weight: 400;
        font-size: 14px;
        color: #d7d7d7;
      }

      .title{
        display: block;
        font-size: 16px;
        font-weight: 800;
        color: white;
        line-height: 27px;
        margin-bottom: 24px;
      }

      .ul{
        list-style: none;

        li{
          display: block;
          padding: 5px 0 8px;
          color: #d7d7d7;
          transition: .3s all linear;
          font-size: 14px;
          font-weight: 400;
          background-color: transparent;
          cursor: pointer;

          i{
            margin-right: 10px;
          }

        }

        li:hover{
          margin-left: 5px;
        }
      }

      .icon-ul{
        list-style: none;
        margin-top: 16px;

        li{
          width: 32px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          display: inline-block;
          margin-right: 16px;
          font-size: 14px;
          cursor: pointer;
          border: 1px solid #999999;
          transition: .3s;
          border-radius: 50%;
        }

      }

    }

  }

</style>
